<template>
  <div class="form-date">
    <div class="form-date-title">{{ title }}</div>
    <van-picker ref="timePicker" :columns="columns" @change="onChange" />
    <div class="form-date-btns">
      <div class="btns-cancel btns-font" @click="cancel">取消</div>
      <div class="btns-gap"></div>
      <div class="btns-confirm btns-font" @click="confirm">确定</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    minDate: {
      type: Object,
      default: new Date(Date.now() - 1000 * 60 * 60 * 24 * 10)
    },
    maxDate: {
      type: Object,
      default: new Date()
    },
    defaultDate: {
      type: Object,
      default: new Date()
    }
  },

  watch: {
    defaultDate: {
      handler(date) {
        this.formatTime(date)
      },
      immediate: true
    }
  },

  data() {
    return {
      columns: [],
      week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      selectDate: new Date()
    }
  },

  methods: {
    cancel() {
      this.$emit('cancel')
    },

    confirm() {
      this.$emit('confirm', this.selectDate)
    },

    onChange(picker) {
      let baseDate = this.columns[picker.getIndexes()[0]]
      let dateStamp = baseDate.dateStamp
      let hourDate = baseDate.children[picker.getIndexes()[1]]
      let hourStamp = this.transTime(hourDate.text)
      let minuteStamp = this.transTime(hourDate.children[picker.getIndexes()[2]].text, true)
      this.selectDate = new Date(dateStamp + hourStamp + minuteStamp - 8 * 60 * 60 * 1000)
    },

    transTime(t, flag) {
      return flag ? parseInt(t) * 60 * 1000 : parseInt(t) * 60 * 60 * 1000
    },

    formatTime(date) {
      let columns = []
      let currentTime = this.minDate.getTime()
      let defaultTime = this.defaultDate.getTime()
      let dateIndex = 0
      let hourIndex = 0
      let minuteIndex = 0
      while (currentTime < this.maxDate.getTime()) {
        columns.push(this.getTimeList(currentTime))
        currentTime += 1000 * 60 * 60 * 24
      }
      if (this.maxDate.getTime() <= currentTime) {
        columns.push(this.getTimeList(this.maxDate.getTime(), true))
      }
      this.columns = columns
      if (defaultTime <= this.maxDate.getTime()) {
        columns.some((item, index) => {
          if (Math.floor(defaultTime / (1000 * 60 * 60 * 24)) === Math.floor(item.dateStamp / (1000 * 60 * 60 * 24))) {
            dateIndex = index
            item.children.some((ite, ind) => {
              if (parseInt(this.defaultDate.getHours()) === parseInt(ite.text)) {
                hourIndex = ind
                ite.children.some((it, ix) => {
                  if (parseInt(this.defaultDate.getMinutes()) === parseInt(it.text)) {
                    minuteIndex = ix
                    return true
                  }
                })
              }
            })
          }
        })
      } else {
        dateIndex = columns.length - 1
        hourIndex = columns[dateIndex].children.length - 1
        minuteIndex = columns[dateIndex].children[hourIndex].children.length - 1
      }
      this.$nextTick(() => {
        this.$refs.timePicker.setIndexes([dateIndex, hourIndex, minuteIndex])
      })
    },

    getTimeList(date, flag) {
      let dateStamp = date - (date % (1000 * 60 * 60 * 24))
      let currentDate = new Date(date)
      let dateText = ''
      if (Math.floor(date / (1000 * 60 * 60 * 24)) === Math.floor(Date.now() / (1000 * 60 * 60 * 24))) {
        dateText = '今 天'
      } else {
        dateText = `${currentDate.getMonth() + 1}月${currentDate.getDate()}日  ${this.week[currentDate.getDay()]}`
      }
      let hours = []
      let minutes = []
      for (let i = 0; i < 60; i++) {
        let text = i < 10 ? '0' + i : '' + i
        let min = { text }
        minutes.push(min)
      }
      if (flag) {
        let lastMins = []
        for (let i = 0; i < currentDate.getMinutes() + 1; i++) {
          let text = i < 10 ? '0' + i : '' + i
          let min = { text }
          lastMins.push(min)
        }
        for (let i = 0; i < currentDate.getHours() + 1; i++) {
          let text = i < 10 ? '0' + i : '' + i
          let hou = {}
          if (i === currentDate.getHours()) {
            hou = { text: text, children: lastMins }
          } else {
            hou = { text: text, children: minutes }
          }
          hours.push(hou)
        }
      } else {
        for (let i = 0; i < 24; i++) {
          let text = i < 10 ? '0' + i : '' + i
          let hou = { text: text, children: minutes }
          hours.push(hou)
        }
      }
      return { text: dateText, children: hours, dateStamp: dateStamp }
    }
  }
}
</script>

<style lang="scss">
.form-date {
  .van-picker-column:first-of-type {
    flex: 2;
  }
  .form-date-title {
    width: 100%;
    text-align: center;
    line-height: 1;
    padding: 22px 0 8px;
    font-size: 16px;
    color: #111;
  }
  .form-date-btns {
    padding: 6px 0 16px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btns-font {
      text-align: center;
      line-height: 32px;
      font-size: 16px;
      letter-spacing: 2px;
      border-radius: 20px;
      border: 1px solid rgb(0, 144, 255);
      color: rgb(0, 144, 255);
    }
    .btns-cancel {
      flex: 3;
    }
    .btns-confirm {
      flex: 5;
      background-color: rgb(0, 144, 255);
      color: #fff;
    }
    .btns-gap {
      width: 12px;
    }
  }
}
</style>
